<template>
	<view style="height: 100%;">
		<view class="title" :style="{'padding-top':statusBarHeight + 10 + 'px'}">
			<view class="title_box">
				<view class="title_box_search">
					<uni-easyinput :input-border="false" @input="inoutChange" prefixIcon="search"
						:suffixIcon="suffixIcon" v-model="value" placeholder="搜索"></uni-easyinput>
				</view>

				<view class="text">
					取消
				</view>
			</view>
		</view>

		<scroll-view v-show="showScroll" style="position: relative;z-index: 1;padding-bottom: 30rpx;" scroll-y="true"
			:style="{'height':`calc(100% - ${statusBarHeight + 20}px)`,'padding-top':`${4}px`}">

			<view class="searchCard" :style="{'margin-top':statusBarHeight + 55+'px'}">
				<view class="searchCard_title">
					最常使用
				</view>

				<view @click="goTo" class="searchCard_content">
					<image src="../../static/image/message.png" mode=""></image>
					<text class="color_unset" style="margin-left: 15rpx;">服务</text>
					<text>通知</text>
				</view>
			</view>


			<view class="searchCard" style="padding-bottom: 20rpx;">
				<view class="searchCard_title">
					联系人
				</view>

				<view class="searchCard_content">
					<image src="../../static/image/ms1.png" mode=""></image>
					<view class="set_line">
						<text>...式</text>
						<text class="color_unset">服务</text>
						<text>平台</text>
					</view>
				</view>

				<view class="searchCard_content">
					<image src="../../static/image/ms2.png" mode=""></image>
					<view class="set_line">
						<text>旅游</text>
						<text class="color_unset">服务</text>
						<text>商...</text>
					</view>
				</view>

				<view class="searchCard_content">
					<image src="../../static/image/ms3.png" mode=""></image>
					<view class="set_line" style="border: none;">
						<text>A旅游</text>
						<text class="color_unset">服务</text>
						<text>商...</text>
					</view>
				</view>
				<view class="line">

				</view>

				<view class="more">
					更多联系人
				</view>
			</view>



			<view class="searchCard" style="padding-bottom: 20rpx;">
				<view class="searchCard_title">
					群聊
				</view>

				<view class="searchCard_content">
					<image src="../../static/image/ms4.png" mode=""></image>
					<view class="set_line">
						<text>...社为您</text>
						<text class="color_unset">服务</text>
					</view>
				</view>

				<view class="searchCard_content">
					<image src="../../static/image/ms5.png" mode=""></image>
					<view class="set_line">
						<text>海外旅游业...(500)</text>
						<view class="mast">
							包含:...车
							<text class="color_unset" style="font-size: 30rpx;margin-left: 0;">服务</text>
							公...
						</view>
					</view>
				</view>

				<view class="searchCard_content">
					<image src="../../static/image/ms6.png" mode=""></image>
					<view class="set_line">
						<text>小洪山社区...(354)</text>
						<view class="mast">
							包含:...车
							<text class="color_unset" style="font-size: 30rpx;margin-left: 0;">服务</text>
							15...
						</view>
					</view>
				</view>
				<view class="line">

				</view>

				<view class="more">
					更多联系人
				</view>
			</view>



		</scroll-view>


	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				safeAreaInsets: 0,
				value: "",
				suffixIcon: "mic-filled",
				showScroll:false,
			}
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			inoutChange(e) {
				console.log(e)
				if (e) {
					this.suffixIcon = "clear"
				} else {
					this.suffixIcon = "mic-filled"
				}
				
				if(e === "服务") {
					this.showScroll = true
				}else {
					this.showScroll = false
				}
			},
			goTo() {
				uni.navigateTo({
					url:"/pages/homeMessage/index/index"
				})
			}
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
		}
	}
</script>

<style scoped>
	.title {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgb(237, 237, 237);
		padding-bottom: 20rpx;
	}

	.title_box {
		width: 700rpx;
		margin: 0 auto;
	}

	.title_box::after {
		content: "";
		display: block;
		clear: both;
		visibility: hidden;
	}

	.title_box_search {
		float: left;
		width: 600rpx;
	}

	.text {
		font-size: 40rpx;
		color: rgb(93, 110, 139);
		margin-left: 12rpx;
		float: left;
		transform: translateY(10rpx);
	}

	::v-deep .uni-easyinput__content {
		border-radius: 8px;
		background-color: rgb(240, 239, 244);
	}

	.searchCard {
		background-color: #fff;
		padding-left: 34rpx;
		box-sizing: border-box;
		margin-top: 14rpx;
	}

	.searchCard:first-child {
		margin-top: 0;
	}

	.searchCard .searchCard_title {
		font-size: 40rpx;
		color: rgb(101, 101, 101);
		border-bottom: 1px solid rgb(251, 251, 251);
		padding: 20rpx;
	}

	.searchCard_content {
		display: flex;
		align-items: center;
		justify-content: start;
		padding-left: 30rpx;
		padding: 20rpx;
	}

	.searchCard_content image {
		width: 55rpx;
		height: 55rpx;
	}

	.color_unset {
		color: rgb(21, 126, 77);
	}

	.searchCard_content text {
		font-size: 40rpx;
	}

	.searchCard_content text:first-child {
		margin-left: 15rpx;
	}

	.searchCard_content .set_line {
		padding-bottom: 20rpx;
		border-bottom: 1px solid rgb(244, 244, 244);
		width: 100%;
	}

	.searchCard_content .mast {
		font-size: 30rpx;
		color: rgb(140, 140, 140);
		margin-left: 15rpx;
	}

	.line {
		border-bottom: 1px solid rgb(251, 251, 251);
		margin: 0 0 20rpx;
		height: 1px;
		padding-left: 24rpx;
	}

	.more {
		padding-left: 24rpx;
		font-size: 32rpx;
		color: rgb(127, 135, 169);
		margin-top: -10rpx;
	}
</style>